<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
			body{margin: 0;}
			.floor-nav{
				height: auto;
				width: 50px;
				text-align: center;
				position: fixed;
				top: calc(50% - 250px);
				left: 0;
				z-index: 999;
			}
			.scroll-nav{
				display: inline-block;
				background: #fff;
				width: 50px;
				height: 50px;
				line-height: 50px;
				cursor: pointer;
			}
			.scroll-nav.active{ color: #2A2A2A; background: yellow; font-weight: bold; }
			.scroll-floor{width: 100%;height: 500px;color: #fff;text-align: center;line-height: 500px;font-size: 50px;}
			.floor1{background: red;}
			.floor2{background: lightgreen;}
			.floor3{background: lightskyblue;line-height: 250px;}
			.floor4{background: lawngreen;}
			.floor5{background: lightcoral;}
			.more{
				width: 200px;
				height: 50px;
				line-height: 50px;
				font-size: 20px;
				background: #eee;
				color: #555;
				border-radius: 25px;
				margin: 0 auto;
			}
		</style>
</head>
<body>
<nav class="floor-nav">
<span class="scroll-nav active">F1</span>
<span class="scroll-nav">F2</span>
<span class="scroll-nav">F3</span>
<span class="scroll-nav">F4</span>
<span class="scroll-nav">F5</span>
<span class="scroll-nav">F6</span>
<span class="scroll-nav">F7</span>
<span class="scroll-nav">F8</span>
<span class="scroll-nav">F9</span>
<span class="scroll-nav">F10</span>
</nav>
<div class="content">
<section class="scroll-floor floor1">一楼商品区</section>
<section class="scroll-floor floor2">二楼商品区</section>
<section class="scroll-floor floor3">三楼商品区</section>
<section class="scroll-floor floor4">四楼商品区</section>
<section class="scroll-floor floor5">五楼商品区</section>
<section class="scroll-floor floor3">
六楼评论区
<p class="more">查看更多评论</p>
</section>
<section class="scroll-floor floor1">七楼商品区</section>
<section class="scroll-floor floor4">八楼商品区</section>
<section class="scroll-floor floor5">九楼商品区</section>
<section class="scroll-floor floor2">十楼商品区</section>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="jquery.scroll.floor.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			$('.more').click(function(){
				$(this).hide();
				$('.floor3').eq(1).css('height',2000);
			});
			scrollFloor({
				floorClass : '.scroll-floor',       //楼层盒子class;默认为'.scroll-floor'
				navClass : '.scroll-nav',           //导航盒子class;默认为'.scroll-nav'
				activeClass : 'active',             //导航高亮class;默认为'active'
				delayTime:300,                      //点击导航，滚动条滑动到该位置的时间间隔;默认为200
				activeTop:200,                      //楼层到窗口的某个位置时，导航高亮（设置该位置）;默认为100
				scrollTop:0                         //点击导航，楼层滑动到窗口的某位置;默认为100
			});
		</script>
</body>
</html>
